<template>
  <div class="article-card" @click="emit('enter-article')">
    <div class="left-time-bar">
      <div class="line"></div>
      <span class="time">
        <div><img class="author-avater" :src="avater!=null ? avater : defaultIcon"/></div>
        @{{useDateToString(new Date(createTime))}}
      </span>
    </div>
    <div class="right-article-main">
      <a-dropdown>
        <EllipsisOutlined class="more-operations"></EllipsisOutlined>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="1">
              删除
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <div class="article-title">{{title}}</div>
      <div class="article-content">{{content}}</div>
      <div class="info">
        <p>
          <span class="author">作者 <a>@{{authorName}}</a></span><span>{{likeCount}} 喜欢  {{replyCount}} 评论</span>
          <span class="smallscreen-time">
            @{{useDateToString(new Date(createTime))}}
          </span>
        </p>
        <p>
          <a-tag :key="i" v-for="(tag, i) in tags">{{tag}}</a-tag>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import defaultIcon from "@assets/imgs/g.jfif?url";
import useDateToString from '@composable/useDateToString';
import { EllipsisOutlined } from '@ant-design/icons-vue';

const emit = defineEmits(['enter-article', 'delete-post']);

const handleMenuClick = (key) => {
  emit('delete-post');
}

defineProps({
  title: String,
  content: String,
  authorName: String,
  avater: {
    type: String,
    default: defaultIcon
  },
  likeCount: Number,
  replyCount: Number,
  createTime: String,
  tags: Array,
})
</script>

<style scoped>
.article-card {
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .left-time-bar {
    display: none;
  }
  .smallscreen-time {
    display: inline;
  }

}
.smallscreen-time {
  display: none;
}
.left-time-bar {
  position: relative;
  z-index: 1;
  flex: 3;
}

.left-time-bar > .time {
  position: absolute;
  top: 50%;
  left: 50%;
  width: fit-content;
  transform: translateY(-50%) translateX(-50%);
  background-color: #fff;
  z-index: 999;
  text-align: center;
  color: #888;
  font-weight: bold;
  font-size: 0.8em;
}
.article-card .line {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 0.5px;
  background-color: #bbb;
}
.right-article-main {
  position: relative;
  padding: 20px 10px;
  border-bottom: #bebebe 0.5px dashed;
  flex: 10;
}
.right-article-main > .article-title {
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: 14px;
}

.right-article-main > .article-content {
  margin-bottom: 20px;
}
.right-article-main > .info {
  font-size: 0.8em;
}
.author {
  margin-right: 10px;
}

.author-avater {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  margin-bottom: 10px;
}
.more-operations {
  position: absolute;
  right: 14px;
  top: 14px;
  cursor: pointer;
}

</style>